<template>
  <div class="goodsList" v-if="!!props.baseList?.length">
    <div class="goodsItem" v-for="(item) in props.baseList" :key="item.id">
      <div class="goodsImg">
        <el-image
          :v-if="item?.cover"
          :src="item.cover"
          :preview-src-list="[item.cover]"
          :preview-teleported="true"
          fit="cover"
        />
      </div>
      <div class="goodsName">{{item.product_name}}</div>
      <!-- <div class="goodsPrice">{{item.min_price}} ~ {{item.max_price}}</div> -->
      <div class="goodsPrice">{{filterPrice(item)}}</div>
      <div class="check">
        <el-checkbox
          v-model="item.isCheck"
          @change="chooseMaterial(item)"
        ></el-checkbox>
      </div>
    </div>
  </div>
  <div v-else height="400px" class="default">
    <el-empty image="/static/noData.png" description="暂无数据"></el-empty>
  </div>

</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from "vue";
import { ElMessage } from "element-plus";

interface PropsType {
  baseList?: any[],
  selectBaseList?: any[],
  remainNum?: (string | number),
  multiple?: boolean,
  totalNum: number,
  infinite: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
  baseList: ()=>[],
  selectBaseList: ()=>[],
  remainNum: 0,
  multiple: true,
  totalNum: 9,
  infinite: false
})

const emit = defineEmits(["getData"]);
let textArr = reactive<any[]>([]);

const chooseMaterial = (item: any) => {
  let indx = props.selectBaseList.findIndex((it: any) => it.id === item.id)
  let deleteItem = null
  if(props.multiple){
    if (indx === -1) {
      if (props.remainNum <= 0 && !props.infinite) {
        item.isCheck = false
        ElMessage.error(`最多可选${props.totalNum}个素材`);
        return
      }
      item.isCheck = true
      props.selectBaseList.push(item)
    } else {
      deleteItem = item
      props.selectBaseList.splice(indx, 1)
      item.isCheck = false
    }
  }else{
    if (indx === -1) {
      if (props.remainNum <= 0 && !props.infinite) {
        item.isCheck = false
        ElMessage.error(`最多可选${props.totalNum}个素材`);
        return
      }
      props.baseList.forEach(ite=>{
        ite.isCheck = false
      })
      item.isCheck = true
      props.selectBaseList.splice(0)
      props.selectBaseList.push(item)
    } else {
      item.isCheck = false
      props.selectBaseList.splice(0)
    }
  }
  emit("getData", {
      deleteItem,
      id: '99',
      type: 7,
      typeStr: "goods",
      data: props.selectBaseList
  });
};

const filterPrice = (item:any):string|number=>{
  const {min_price, min_original_price, max_price, max_original_price} = item
  if((Number(min_price) == Number(min_original_price)) && (Number(min_original_price) == Number(max_price)) && (Number(max_price) == Number(max_original_price))){
    return Number(min_price)
  }else{
    const min = Number(min_price) > Number(min_original_price) ? min_original_price : min_price
    const max = Number(max_price) > Number(max_original_price) ? max_price : max_original_price
    return `${min} ~ ${max}`
  }
}


</script>

<style lang="scss" scoped>
.goodsList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .goodsItem{
    position: relative;
    flex-basis: 23.1%;
    margin-right: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    border: 1px solid #eee;
    &:nth-of-type(4n){
      margin-right: 0;
    }
    &:hover{
      box-shadow: 0 0 10px #eee;
      cursor: pointer;
    }
    .goodsImg{
      width: 100%;
      height: 120px;
      .el-image{
        width: 100%;
        height: 100%;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .goodsName{
      min-width: 0;
      width: 100%;
      max-width: 140px;
      padding:4px 4px;
      box-sizing: border-box;
      line-height: 1.2;
      color: #444;
      font-size: 12px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .goodsPrice{
      padding: 0 4px 8px;
      line-height: 1;
      font-size: 12px;
      color: #666;
    }
    .check{
      position: absolute;
      left: 10px;
      top: 0;
    }
  }
  
}
.default{

}
</style>

